<template>
  <div>
    <!-- 查询条件 -->
    <el-row>
      <el-col :span="6">
        <el-input v-model="param.name" placeholder="请输入优惠卷名" clearable size="small"></el-input>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-select v-model="param.status" placeholder="请选择状态" style="width: 100%" size="small">
          <el-option v-for="(label, value) in STATUS_OPTIONS" :key="value" :label="label" :value="value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-button type="warning" icon="el-icon-delete" @click="clearInfo" size="small">清空条件</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="queryPageInfo" size="small">查询</el-button>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-button type="success" icon="el-icon-plus" @click="showAddDialog" size="small">新增优惠券</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="150"></el-table-column>
          <el-table-column prop="name" label="优惠券名称" width="150"></el-table-column>
          <el-table-column prop="description" label="优惠内容"></el-table-column>
          <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
              {{ transType(scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column prop="usedQuantity" label="已领取"></el-table-column>
          <el-table-column prop="totalQuantity" label="发放总量"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              {{ transStatus(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="success" @click="online(scope.row.id)">上线</el-button>
              <el-button size="mini" type="danger"@click="offline(scope.row.id)">下线</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 新增优惠券对话框 -->
    <el-dialog title="新增优惠券" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="newCoupon" ref="newCouponForm" label-width="100px">
        <el-form-item label="优惠券名称" prop="name">
          <el-input v-model="newCoupon.name"></el-input>
        </el-form-item>
        <el-form-item label="优惠内容" prop="description">
          <el-input v-model="newCoupon.description"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="newCoupon.type" placeholder="请选择类型" style="width: 100%">
            <el-option v-for="(label, value) in TYPE_OPTIONS" :key="value" :label="label" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="newCoupon.status" placeholder="请选择状态" style="width: 100%">
            <el-option v-for="(label, value) in STATUS_OPTIONS" :key="value" :label="label" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发放总量" prop="totalQuantity">
          <el-input-number v-model="newCoupon.totalQuantity" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewCoupon">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑优惠券对话框 -->
    <el-dialog title="编辑优惠券" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="editCoupon" ref="editCouponForm" label-width="100px">
        <el-form-item label="优惠券名称" prop="name">
          <el-input v-model="editCoupon.name"></el-input>
        </el-form-item>
        <el-form-item label="优惠内容" prop="description">
          <el-input v-model="editCoupon.description"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="editCoupon.type" placeholder="请选择类型" style="width: 100%">
            <el-option v-for="(label, value) in TYPE_OPTIONS" :key="value" :label="label" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editCoupon.status" placeholder="请选择状态" style="width: 100%">
            <el-option v-for="(label, value) in STATUS_OPTIONS" :key="value" :label="label" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发放总量" prop="totalQuantity">
          <el-input-number v-model="editCoupon.totalQuantity" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditCoupon">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: {
        name: '',
        status: ''
      },
      tableData: [],
      TYPE_OPTIONS: {
        FIXED: '固定金额',
        PERCENTAGE: '百分比折扣'
      },
      STATUS_OPTIONS: {
        '-1': '全部',
        '0': '未激活',
        '1': '已上线',
        '2': '下线'
      },
      addDialogVisible: false,
      editDialogVisible: false,
      newCoupon: {
        name: '',
        description: '',
        type: '',
        status: '',
        totalQuantity: 0
      },
      editCoupon: {
        id: null,
        name: '',
        description: '',
        type: '',
        status: '',
        totalQuantity: 0
      }
    };
  },

  methods: {
    clearInfo() {
      this.param = { name: '', status: '' };
    },
    handleEdit(row) {
      // 直接使用表格中的数据
      this.editDialogVisible = true;
     

      this.editCoupon = { ...row }; // 使用扩展运算符复制对象，避免直接修改原数据
    },
    offline(id) {
      this.updateCouponStatus('apic/coupon/offline/' + id);
    },
    online(id) {
      this.updateCouponStatus('apic/coupon/online/' + id);
    },
    updateCouponStatus(url) {
      this.$axios.get(url)
        .then(resp => {
          if (resp.data.code === 200) {
            this.$message.success("操作成功！");
            this.queryPageInfo();
          } else {
            this.$message.error("操作失败，请重试！");
          }
        })
        .catch(error => {
          console.error(error);
          this.$message.error("网络请求失败，请检查您的网络连接！");
        });
    },
    transType(typecode) {
      return this.TYPE_OPTIONS[typecode] || '未知';
    },
    transStatus(statuscode) {
      return this.STATUS_OPTIONS[statuscode] || '未知';
    },
    queryPageInfo() {
      this.$axios.post('/apic/coupon/getCoupon', this.param)
        .then(resp => {
          if (resp.data.code === 200) {
            this.tableData = resp.data.data;
          } else {
            this.$message.error("数据获取失败，请稍后重试！");
          }
        })
        .catch(error => {
          console.error(error);
          this.$message.error("网络请求失败，请检查您的网络连接！");
        });
    },
    showAddDialog() {
      this.addDialogVisible = true;
      this.newCoupon = {
        name: '',
        description: '',
        type: '',
        status: '',
        totalQuantity: 0
      };
    },
    submitNewCoupon() {
      this.$axios.post('/apic/coupon/addCoupon', this.newCoupon)
        .then(resp => {
          if (resp.data.code === 200) {
            this.$message.success("新增优惠券成功！");
            this.addDialogVisible = false;
            this.queryPageInfo();
          } else {
            this.$message.error("新增优惠券失败，请稍后重试！");
          }
        })
        .catch(error => {
          console.error(error);
          this.$message.error("网络请求失败，请检查您的网络连接！");
        });
    },
    submitEditCoupon() {
      this.$axios.post(`/apic/coupon/updateCoupon`, this.editCoupon)
        .then(resp => {
          if (resp.data.code === 200) {
            this.$message.success("编辑优惠券成功！");
            this.editDialogVisible = false;
            this.queryPageInfo();
          } else {
            this.$message.error("编辑优惠券失败，请稍后重试！");
          }
        })
        .catch(error => {
          console.error(error);
          this.$message.error("网络请求失败，请检查您的网络连接！");
        });
    }
  },
  created() {
    this.queryPageInfo();
  }
};
</script>